<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发布物品 - 失物招领平台</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '4px'
                    }
                }
            }
        }
    </script>
    <style>
        .photo-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }
        .photo-item {
            aspect-ratio: 1/1;
        }
        .photo-remove {
            position: absolute;
            top: 4px;
            right: 4px;
            width: 20px;
            height: 20px;
            background-color: rgba(0, 0, 0, 0.5);
            color: white;
            border-radius: 9999px;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
        .char-count {
            color: #6B7280;
            font-size: 12px;
            text-align: right;
        }
        .required:after {
            content: "*";
            color: #EF4444;
            margin-left: 2px;
        }
        .error-message {
            color: #EF4444;
            font-size: 12px;
            margin-top: 4px;
        }
        i {
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>
<body class="min-h-[1024px] bg-gray-50 font-sans text-gray-800">
    <div class="max-w-3xl mx-auto pb-20">
        <!-- 导航栏 -->
        <nav class="sticky top-0 z-10 bg-white shadow-sm py-4 px-6 flex items-center justify-between">
            <button class="flex items-center text-gray-600 hover:text-primary">
                <i class="fas fa-arrow-left mr-2 w-4 h-4"></i>
                <span>返回</span>
            </button>
            <h1 class="text-xl font-semibold">发布物品</h1>
            <button class="bg-primary text-white px-4 py-2 !rounded-button hover:bg-blue-600 transition-colors">
                发布
            </button>
        </nav>

        <!-- 表单内容 -->
        <div class="bg-white rounded-lg shadow-sm mt-6 p-6">
            <!-- 照片上传区域 -->
            <div class="mb-8">
                <h2 class="text-lg font-medium mb-4 required">物品照片</h2>
                <div class="photo-grid">
                    <div class="photo-item relative bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://ai-public.mastergo.com/ai/img_res/46efb147ba58ede4ec8f28cfdfb7feac.jpg" alt="物品照片" class="w-full h-full object-cover">
                        <div class="photo-remove">
                            <i class="fas fa-times text-xs"></i>
                        </div>
                    </div>
                    <div class="photo-item relative bg-gray-100 rounded-lg overflow-hidden">
                        <img src="https://ai-public.mastergo.com/ai/img_res/aa9fe6b82b252fc3e57fe33315d73009.jpg" alt="物品照片" class="w-full h-full object-cover">
                        <div class="photo-remove">
                            <i class="fas fa-times text-xs"></i>
                        </div>
                    </div>
                    <div class="photo-item relative bg-gray-100 rounded-lg border-2 border-dashed border-gray-300 flex flex-col items-center justify-center cursor-pointer hover:border-primary transition-colors">
                        <i class="fas fa-plus text-gray-400 w-8 h-8 mb-2"></i>
                        <span class="text-sm text-gray-500">添加照片</span>
                        <span class="text-xs text-gray-400 mt-1">最多9张</span>
                    </div>
                </div>
                <p class="text-sm text-gray-500 mt-2">请上传清晰的物品照片，最多9张</p>
            </div>

            <!-- 基本信息区域 -->
            <div class="mb-8">
                <h2 class="text-lg font-medium mb-4">基本信息</h2>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-1 required">物品名称</label>
                    <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入物品名称">
                    <div class="error-message hidden">请输入物品名称</div>
                </div>
                
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium mb-1 required">拾取/丢失时间</label>
                        <div class="relative">
                            <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="选择时间">
                            <i class="fas fa-calendar absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                        </div>
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1 required">拾取/丢失地点</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入地点">
                    </div>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium mb-1 required">物品分类</label>
                    <div class="relative">
                        <select class="w-full px-3 py-2 border border-gray-300 rounded-md appearance-none focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                            <option value="">请选择物品分类</option>
                            <option value="wallet">钱包/证件</option>
                            <option value="phone">手机/数码</option>
                            <option value="key">钥匙</option>
                            <option value="bag">箱包</option>
                            <option value="book">书籍/文件</option>
                            <option value="other">其他</option>
                        </select>
                        <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
                    </div>
                </div>
            </div>

            <!-- 详细描述区域 -->
            <div class="mb-8">
                <h2 class="text-lg font-medium mb-4">详细描述</h2>
                <div class="mb-2">
                    <textarea class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" rows="5" placeholder="请详细描述物品特征、状态等信息，例如品牌、颜色、尺寸、特殊标记等"></textarea>
                </div>
                <div class="char-count">0/500</div>
            </div>

            <!-- 联系方式 -->
            <div class="mb-8">
                <h2 class="text-lg font-medium mb-4">联系方式</h2>
                
                <div class="grid grid-cols-2 gap-4 mb-4">
                    <div>
                        <label class="block text-sm font-medium mb-1 required">联系人</label>
                        <input type="text" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入姓名">
                    </div>
                    <div>
                        <label class="block text-sm font-medium mb-1 required">联系电话</label>
                        <input type="tel" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="请输入手机号码">
                    </div>
                </div>
                
                <div class="bg-blue-50 p-3 rounded-md text-sm text-blue-800">
                    <i class="fas fa-info-circle mr-2 w-4 h-4"></i>
                    <span>您的联系方式仅用于物品认领，平台会严格保护您的隐私信息</span>
                </div>
            </div>

            <!-- 底部提示 -->
            <div class="border-t border-gray-200 pt-6">
                <div class="bg-gray-50 p-4 rounded-md">
                    <h3 class="font-medium mb-2">发布须知</h3>
                    <ul class="text-sm text-gray-600 list-disc pl-5 space-y-1">
                        <li>请确保发布信息真实准确，虚假信息将被删除</li>
                        <li>贵重物品建议前往附近派出所登记</li>
                        <li>平台仅提供信息发布服务，不承担物品保管责任</li>
                        <li>认领物品时请仔细核对物品特征，谨防诈骗</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // 字数统计
            const textarea = document.querySelector('textarea');
            const charCount = document.querySelector('.char-count');
            
            textarea.addEventListener('input', function() {
                const count = this.value.length;
                charCount.textContent = `${count}/500`;
                
                if (count > 500) {
                    charCount.classList.add('text-red-500');
                } else {
                    charCount.classList.remove('text-red-500');
                }
            });
            
            // 照片删除
            document.querySelectorAll('.photo-remove').forEach(btn => {
                btn.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const photoItem = this.closest('.photo-item');
                    photoItem.remove();
                });
            });
            
            // 表单验证
            const formInputs = document.querySelectorAll('input[required], select[required], textarea[required]');
            
            formInputs.forEach(input => {
                input.addEventListener('blur', function() {
                    if (!this.value.trim()) {
                        const errorMsg = this.nextElementSibling;
                        if (errorMsg && errorMsg.classList.contains('error-message')) {
                            errorMsg.classList.remove('hidden');
                        }
                    }
                });
                
                input.addEventListener('input', function() {
                    const errorMsg = this.nextElementSibling;
                    if (errorMsg && errorMsg.classList.contains('error-message')) {
                        errorMsg.classList.add('hidden');
                    }
                });
            });
        });
    </script>
</body>
</html>